<template>
  <t-layout class="t-layout">
    <t-header>
      <t-head-menu value="item1" height="150px">
        <template #logo>
          <img class="logo" src="../time_managerment/img/Clock.png" alt="logo" />
        </template>
          <div class="left-icon"><t-icon class="t-menu__operations-icon" name="sunny" /></div>
          <t-icon class="t-menu__operations-icon" name="moon" />
          <t-icon class="t-menu__operations-icon" name="notification" />
          <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg" size="large"></t-avatar>Ming
      </t-head-menu>
    </t-header>
    <t-layout>
      <t-aside style="border-top: 1px solid var(--component-border)">
        <t-menu theme="light" value="dashboard" style="margin-right: 50px" height="550px">
          <router-link to="/">
            <t-menu-item value="Home">
              <template #icon>
                <t-icon name="home" />
              </template>
              Home
            </t-menu-item>
            </router-link>
          <router-link to="/clock">
          <t-menu-item value="Clock">
            <template #icon>
              <t-icon name="time" />
            </template>
            Clock
          </t-menu-item>
          </router-link>
          <router-link to ="/task">
          <t-menu-item value="Task">
            <template #icon>
              <t-icon name="task" />
            </template>
            Task
          </t-menu-item>
        </router-link>
        <router-link to ="/statistics">
          <t-menu-item value="statistics">
            <template #icon>
              <t-icon name="trending-up" />
            </template>
            Statistics
          </t-menu-item>
        </router-link>
        <router-link to="/about">
          <t-menu-item value="About">
            <template #icon>
              <t-icon name="catalog" />
            </template>
            About
          </t-menu-item>
        </router-link>
        </t-menu>
      </t-aside>
      <t-layout>
        <t-content>
          <t-space class="blank"><router-view></router-view></t-space>
          
        </t-content>
        <t-footer class ="t-footer">Help you manager your time!</t-footer>
      </t-layout>
    </t-layout>
  </t-layout>
</template>


<script>
import Task from './components/Task.vue'
import Clock from './components/Clock.vue'
import { RouterLink } from 'vue-router';
  export default {
    components:
    {
    Task,
    Clock,
    RouterLink
},
    methods:{
      watch:{
  $route(to,from){
    window.location.reload();
      },
     },
    },
  }
</script>


<style>
.logo{
  width: 300px;
  height: 200px;
  margin-left: -20px;
}
.left-icon{
  margin-left: auto;
}
.logout-bottom
{
  margin-top: 300px;
}
.t-footer {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.blank
{
  width: 1600px;
  height: 1000px;
}
/* .blank{
  width:1200px;
  height:650px;
} */
</style>

